<template>
  <div class="login">
    <div class="header">
      <div class="left he">选择语言<van-icon name="arrow-down" /></div>
      <div class="right he"><van-icon name="discount" />需要帮助</div>
    </div>
    <div class="logo">
      <img
        src="https://static.account.xiaomi.com/uiTheme/images/miotstore/logo.svg"
        alt=""
      />
      <h3>欢迎登录小米有品</h3>
    </div>
    <login-main />
  </div>
</template>

<script>
import loginMain from "./components/login/loginMain.vue";
export default {
  name: "login",
  data() {
    return {};
  },
  components: {
    loginMain,
  },
  methods: {},
};
</script>
<style  scoped>
.login {
  background-color: #fff;
  height: 100vh;
}
.header {
  height: 0.72rem;
  padding: 0.15rem 0.3rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.header .he {
  display: flex;
  align-items: center;
  font-size: 0.15rem;
  color: rgba(0, 0, 0, 50%);
}
.van-icon {
  margin: 0rem 0.1rem;
}
.logo {
  height: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/background.d3d7d2dd.png);
  background-size: cover;
  background-position-y: -0.8rem;
  color: rgba(0, 0, 0, 0.6);
}
.logo h3 {
  font-weight: 400;
}
.logo img {
  width: 0.48rem;
  height: 0.48rem;
  margin-bottom: 0.2rem;
}
</style>

